<body>

<div id="control" style="float:left">
    <p>文字</p>
    <input type="text" id="msg" value="123s" onchange="change()">
    <p>重力</p>
    <input type="range" id="gravity" value="0" min="-1" max="1" step="0.1" onchange="change()">
    <p>周期</p>
    <input type="range" id="duration" value="0.4" min="0.01" max="0.99" step="0.01" onchange="change()">
    <p>速度</p>
    <input type="range" id="speed" value="0.1" min="0" max="5" step="0.01" onchange="change()">
    <p>半径</p>
    <input type="range" id="radius" value="2" min="1.8" max="20" step="0.1" onchange="change()">
    <p>分辨率</p>
    <input type="range" id="resolution" value="10" min="3" max="20" step="1" onchange="change()">
    <p>
        <span id="ball">圆形</span>
        <span id="rect">方形</span>
    </p>
</div>
<canvas id="canvas" width='500' height="500" style="position: absolute; background-color:aqua">
        <p>you browser not support canvas!<p>
    </canvas>
<button id="btn">三</button>
<script src = "./dist/bundle.js"></script>
</body>